<script setup>
import { onMounted, ref, warn } from 'vue';
import ChartZhazhiyali from '@/components/Chart/ChartZhazhiYali';
import OilTemperature from '@/components/OilTemperature';
import OilLevel from '@/components/OilLevel';
import homePageApi from "@/api/homepage";
import cyjPicture from '@/assets/pictures/微信截图_20241014104146.png'
const items = ref([]);
const WarnAndDiag = ref([]);
const PDIStatus = ref([]);
const CarSpeed = ref([]);
const Road1 = ref([]);
const Road2 = ref([]);
const LiquidLevel = ref([]);
const LiquidTemp = ref([]);
const Press = ref([]);
const localImageUrl = ref('微信截图_20241014104146.png'); // 替换为实际本地图片路径

const fetchData = async () => {

  const res_items = await homePageApi.getProdMonitor();
  items.value = res_items.data;
  const res_PDIStatus = await homePageApi.getPDIStatus();
  PDIStatus.value = res_PDIStatus.data;
  const res_CarSpeed = await homePageApi.getCarSpeed();
  CarSpeed.value= res_CarSpeed.data < 0.1 ? 70 : res_CarSpeed.data;//赋默认值以显示
  const res_Road1 = await homePageApi.getRoad1();
  Road1.value= res_Road1.data < 0.1 ? 62 : res_Road1.data;//赋默认值以显示
  const res_Road2 = await homePageApi.getRoad2();
  Road2.value= res_Road2.data < 0.1 ? 62 : res_Road2.data;//赋默认值以显示
  const res_LiquidLevel = await homePageApi.getLiquidLevel();
  LiquidLevel.value= res_LiquidLevel.data < 0.1 ? 0.8 : res_LiquidLevel.data;//赋默认值以显示
  const res_LiquidTemp = await homePageApi.getLiquidTemp();
  LiquidTemp.value = res_LiquidTemp.data;
  const res_Press = await homePageApi.getPress();
  Press.value = res_Press.data;
}
const getWaringdata = async () => {
  const res_WarnAndDiag = await homePageApi.getWarnAndDiag();
  WarnAndDiag.value = res_WarnAndDiag.data;
}


onMounted(() => {
    fetchData();
    getWaringdata();
})

setInterval(() => {
        fetchData();
        getWaringdata();
      }, 10000);

</script>

<template>
  <el-row class="main-row">
    <el-col :span="15" style="width: 700px;max-width: 40%">
      <el-row class="card">
        <el-col style="width: 100%">
          <el-row >
            <el-col :span="16">
              <h1 style="font-size: 20px;">生产监控</h1>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" style="float: left;margin: 0 50px 0 10px;">
              <ul>
                <li>
                  <el-icon><Compass /></el-icon>
                  安全运行时长: {{ items.totalWorkTime}} 小时</li>
                <li>
                  <el-icon><Histogram /></el-icon>
                  当天压制量: {{ items.dailyNum }} 桶</li>
                <li>
                  <el-icon><Ticket /></el-icon>
                  当月压制量: {{ items.monthNum }} 桶</li>
              </ul>

            </el-col>
            <el-col :span="10" style="">
              <ul>
                <li>
                  <el-icon><Management /></el-icon>
                  总压制量: {{ items.totalNum }} 桶</li>
                <li>
                  <el-icon><Postcard /></el-icon>
                  当前钢桶号: {{ items.matId }}</li>
                <li>
                  <el-icon><Clock /></el-icon>
                  进入超压机时间: {{ items.productionTime }}</li>
              </ul>
            </el-col>
          </el-row>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="16">
          <el-row class="card">
            <el-col :span="24">
              <div class="demo-progress">
                小车速度
                <el-progress :text-inside="false" :stroke-width="20" :percentage="CarSpeed/1" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16" class="card">
              <div>
                主缸行程
                <el-progress :text-inside="false" :stroke-width="20" :percentage="Road1/1" />
              </div>
              <div style="margin-top: 20px">
                桶罩缸行程
                <el-progress :text-inside="false" :stroke-width="20" :percentage="Road2/1" />
              </div>
            </el-col>
            <el-col :span="8" class="card">
              <div>
                液压油液位
                <OilLevel :leveldata="[LiquidLevel]"/>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" class="cardTemp center-content card" style="padding-top: 25px">
          <OilTemperature :tremperaturedata="[LiquidTemp]" />
          <div>液压油温度</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="card">
          <ChartZhazhiyali :pressdata="[Press]"/>
          <!-- <ChartZhazhiyali /> -->
        </el-col>
      </el-row>
      <el-row>
          <div class="card"  style="width: 100%;">
            <h2 style="font-size: 20px; ">预警与诊断</h2>
            <div class="wrapper">
              <el-table :data="WarnAndDiag"  class="custom-table">
                <el-table-column prop="warningInfo" label="预警信息" width="180" />
                <el-table-column prop="creatTime" label="触发时间" width="140" />
                <el-table-column prop="warningStatus" label="预警状态" width="90"/>
                <el-table-column prop="diagnosisInfo1" label="诊断结果" />
              </el-table>
            </div>
          </div>
      </el-row>
    </el-col>

    <el-col :span="28">
      <el-row style="flex-wrap: nowrap">
          <div style="margin-left: 40px">
            <div style="width:1000px;height:660px;overflow:hidden;background-color: #000C34">
              <iframe style="width:100%;height:700px;margin-top:-35px;border: 0"
                      src='http://10.78.34.45:83/threeDimPowerPlant/IHC?isShowTree=false&isShowInfo=false'/>
            </div>
<!--            测试图片-->
<!--            <el-image class="local-image"  :src="cyjPicture" alt="三维"></el-image>-->
          </div>
      </el-row>
    </el-col>
  </el-row>

<!--  <div>-->
<!--    <div style="display: flex; align-items: center;">-->
<!--      <div class="message"  style="white-space: pre-line; word-break: break-all; ">-->
<!--        <span style="font-size: 20px;">设备信息</span> <br>-->
<!--        设别名称:超级压缩机 <br>-->
<!--        设备编码:OTES1700PQ-->
<!--      </div>-->
<!--      <el-image class="local-image"  :src="cyjPicture" alt="三维" :fit="fit"></el-image>-->
<!--    </div>-->
<!--  </div>-->
</template>





<style scoped>
/* 在这里添加样式 */

ul {
  overflow: visible;
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 30px;
}
.card {
  width: 100%;

  border: 1px solid #005fff; /* 添加边框 */
  border-radius: 8px; /* 保留圆角 */
  margin-bottom: 5px;
  padding: 5px;
  color: #D1E9FF; /* 文本颜色 */
  background-color: transparent; /* 确保背景透明 */

}

.wrapper {
  border-top: 1px solid #b4bcc9; /* 可以根据需要调整颜色、粗细等 */
  padding-bottom: 10px;
}
.cardTemp {
  width: 100%;
  border-radius: 8px; /* 保留圆角 */
  margin-bottom: 5px;
  padding: 5px;
  background-color: transparent; /* 确保背景透明 */
  display: flex;
  flex-direction: column; /* 使内容按列布局 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文本居中 */
}


:deep(.el-table th.el-table__cell){
  background-color: #000C34!important;
}
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell){
  background-color: #000C34!important;
}
:deep(.el-table .cell ){
  color:rgb(244, 244, 244);
}

.local-image {
  position: absolute;
  /*max-width: 60%;*/
  height: 620px;
  width:37vw;
  left: 3px;
  top: 90px; /* 距离顶部20px */
  /*原来*/
  /*height: 41vw;*/
  /*width:50vw;*/
  /*left: 630px;*/
  /*top: 140px; !* 距离顶部20px *!*/

}
.message {
  position: absolute;
  max-width: 60%;
  height: 650px;
  width:15vw;
  left: 630px;
  top: 140px; /* 距离顶部20px */
  z-index: 1; /* 设置一个比.local-image 更高的 z-index 值 */
  color:white;

}

.main-row{
  top: 20px;
}

.cardTemp {
  width: 100%;
  border-radius: 8px; /* 保留圆角 */
  margin-bottom: 5px;
  padding: 5px;
  background-color: transparent; /* 确保背景透明 */
  display: flex;
  flex-direction: column; /* 使内容按列布局 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文本居中 */
}


</style>


